<!doctype html>
<html lang="en">

<head>
    <title>Quark Report</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/453c20c79d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
        h4,
        h3 {
            font-size: 1.8rem;
        }

        .container {
            max-width: 1540px;
            max-width: 96%;
        }

        .confidence {
            font-size: 1.5rem;
        }

        .confidence-tag {
            font-size: 1.5rem;
            text-align: center;
            display: inline-block;
            position: relative;
            padding: 5px;
            width: 80px;
            margin-right: 5px;
            margin-bottom: 12px;
        }

        .label-tag {
            font-size: 1.25rem;
            background: #ff070747;
            display: inline-block;
            position: relative;
            padding: 5px;
            margin-right: 15px;
            margin-bottom: 12px;
        }

        .label-group {
            margin-top: 30px;
            margin-bottom: 20px;
        }

        /* Customize the label (the container) */
        .label-container {
            font-size: 1.25rem;
            background: #cdeeff;
            display: inline-block;
            position: relative;
            padding-left: 55px;
            padding-top: 2px;
            margin-bottom: 12px;
            margin-right: 15px;
            width: 180px;
            height: 35px;
            height: 25px cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .label-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 35px;
            width: 40px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .label-container:hover input~.checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .label-container input:checked~.checkmark {
            background-color: #2196F3;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .label-container input:checked~.checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .label-container .checkmark:after {
            left: 17px;
            top: 8px;
            width: 7px;
            height: 14px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        label {
            display: inline-block;
            margin-bottom: 0.5rem;
            font-weight: 700;
            font-size: 1.5rem;
        }

        .labels {
            font-size: 85%;
            border-radius: 5px;
            height: 2rem;
            width: 3rem;
            padding: 5px;
            margin: 2.5px;
            background-color: #dedede;
        }

        body {
            background-color: #f1f1f1;
            color: #6b6a6a;
        }

        .box {
            position: absolute;
        }

        .box select {
            color: #7a7a7a;
            padding: 12px;
            width: 250px;
            border-color: #dddddd;
            -webkit-appearance: none;
            font-size: 1.25rem;
        }

        .box::before {
            content: "\f13a";
            font-family: FontAwesome;
            position: absolute;
            top: 0;
            right: 0;
            width: 20%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            color: rgb(66 66 66 / 50%);
            /* background-color: rgba(255, 255, 255, 0.1); */
            pointer-events: none;
        }

        .box:hover::before {
            color: rgba(255, 255, 255, 0.6);
            background-color: rgba(255, 255, 255, 0.2);
        }

        .box select option {
            padding: 30px;
        }

        .box select::-ms-expand {
            display: none;
        }

        #search {
            background-image: url('/css/searchicon.png');
            background-position: 10px 12px;
            background-repeat: no-repeat;
            width: 100%;
            font-size: 1.25rem;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
        }

        .table td,
        .table th {
            padding: 0.75rem;
            padding-left: 50px;
            padding-right: 20px;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
            padding-top: 16px;
        }

        div[role="progressbar"] {
            --size: 15rem;
            --fg: #ec284d;
            --bg: #ec284d21;
            --pgPercentage: var(--value);
            animation: growProgressBar 3s 1 forwards;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: 15px;
            background:
                radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
                conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
            font-family: Helvetica, Arial, sans-serif;
            font-size: calc(var(--size) / 5);
            color: var(--fg);
        }

        @media (max-width:1000) {
            html {
                font-size: 50% !important;
            }
        }

        div[role="progressbar"]::before {
            counter-reset: percentage var(--value);
            content: counter(percentage) '/204';
        }

        .filter-bar {
            margin-top: 20px;
            box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
            padding: 25px;
            padding-bottom: 40px;
            background-color: white;
        }

        .sample-info {
            padding: 20px;
        }

        .logo {
            width: 460px;
            margin-top: 60px;
            margin-left: auto;
            margin-right: auto;
        }

        .report-crimes {
            box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
            margin-top: 20px;
        }

        .report-sample-info {
            box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
            padding: 40px 45px 25px 45px;
            background-color: white;
            font-size: 110%
        }

        .table-wrap {
            width: 100%;
            font-size: 140%;
        }

        .table-row-odd,
        .table-row-odd:hover {
            background-color: #e3f4ff !important;
        }

        tbody tr {
            cursor: pointer;
        }

        dd {
            color: dimgray;
            /* font-family: monospace; */
        }

        .badge {
            font-size: 1.2rem;
            text-align: center;
            display: inline-block;
            position: relative;
            padding: 5px;
        }

        .sample-info-lable {
            padding-right: 0px;
            padding-left: 0px;
        }

        .web-title {
            margin: 40px 0 0 0;
            font-size: 2.5rem;
            font-family: auto;
            font-weight: 900;
        }

        .badge-warning {
            color: #ffffff;
            background-color: #d37300;
        }

        .radar-chart {
            margin-top: 20px;
            box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
            padding: 25px;
            padding-block: 40px;
            background-color: white;
        }

        .label-s {
            margin-right: 10px
        }

        .deselect {
            margin-bottom: 30px;
            width: 180px;
            height: 40px;
            background-color: white;
            border-color: #898989;
            border-style: solid;
            border-width: 3px;
            font-size: 1.25rem;
            color: #6b6a6a;
        }

        .deselect:hover {
            background-color: #939393;
            color: white;
        }
    </style>
</head>

<body>
    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 text-center mb-5"><img class="logo"
                        src="https://quark-engine.github.io/ruleviewer/quark-logo.png" /></div>
            </div>
            <div class="row">
                <div class="col-sm-7 report-sample-info" style="max-width: 100%;flex: 0 0 48%;">
                    <div class="row">
                        <div class="col-sm-6">
                            <div role="progressbar" aria-valuenow="$effective_rules_number_100$" aria-valuemin="0"
                                aria-valuemax="$all_rules_number$" style="--value:$effective_rules_number_100$">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <h4>Analysis Result</h4>
                            <p style="font-size: 1.25rem;">The # of rules for each confidence</p>
                            <div class="row" style="margin-left: auto;margin-top: 20px;">
                                <div class="col-sm-6 sample-info-lable">
                                    <div class="confidence"><span
                                            class="confidence-tag badge-danger badge-result">100%</span>
                                        $effective_rules_number_100$</div>
                                </div>
                                <div class="col-sm-5 sample-info-lable">
                                    <div class="confidence"><span
                                            class="confidence-tag badge-warning badge-result">80%</span>
                                        $effective_rules_number_80$</div>
                                </div>
                                <div class="col-sm-6 sample-info-lable">
                                    <div class="confidence"><span
                                            class="confidence-tag badge-primary badge-result">60%</span>
                                        $effective_rules_number_60$</div>
                                </div>
                                <div class="col-sm-5 sample-info-lable">
                                    <div class="confidence"><span
                                            class="confidence-tag badge-info badge-result">40%</span>
                                        $effective_rules_number_40$</div>
                                </div>
                                <div class="col-sm-6 sample-info-lable">
                                    <div class="confidence"><span
                                            class="confidence-tag badge-success badge-result">20%</span>
                                        $effective_rules_number_20$</div>
                                </div>
                                <div class="col-sm-5 sample-info-lable">
                                    <div class="confidence"><span
                                            class="confidence-tag badge-secondary badge-result">0%</span>
                                        $effective_rules_number_0$</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 report-sample-info"
                    style="margin-left:30px; font-size: 140%; margin-right: -300px;">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4>Sample Information</h4>
                            <div class="row" style="margin-left: auto;margin-top: 20px;">
                                <dt class="col-sm-3 sample-info-lable">File name</dt>
                                <dd class="col-sm-9 sample-info-lable">$filename$</dd>
                                <dt class="col-sm-3 sample-info-lable">MD5</dt>
                                <dd class="col-sm-9 sample-info-lable">$md5$</dd>
                                <dt class="col-sm-3 sample-info-lable">File size</dt>
                                <dd class="col-sm-9 sample-info-lable">$filesize$ Mb</dd>
                                <dt class="col-sm-3 sample-info-lable">Labels</dt>
                                <dd class="col-sm-9 sample-info-lable">
                                    <div class="label-s">
                                        $five_labels_html$
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row radar-chart">
                <div class="col-md-6"><canvas id="myChart" width="400" height="400"></canvas></div>
                <div class="col-md-6">
                    <h3>Select lables to see max confidence in radare chart</h3>
                    <div class="label-group">
                        $all_labels_html$
                    </div>
                    <button class="deselect" onclick="deselect()">Deselect all</button>
                    <h3>The labels with 100% confidence crimes</h3>
                    <div class="label-group">
                        $five_labels_html$
                    </div>
                </div>
            </div>
            <div class="row filter-bar">
                <div class="col-md-9">
                    <label>Search crime</label>
                    <input type="text" id="search" onkeyup="search()" placeholder="Search for crime description..">
                </div>
                <div class="col-md-3">
                    <label>Confidence filter</label>
                    <div class="box">
                        <select onchange="confidenceFilter(value);">
                            <option value="" selected disabled hidden>Select confidence.. </option>
                            <option>100%</option>
                            <option>80%</option>
                            <option>60%</option>
                            <option>40%</option>
                            <option>20%</option>
                            <option>0%</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row report-crimes">
                <div class="table-wrap border">
                    <table id="report" class="table align-middle mb-0 bg-white">
                        <thead class="bg-light">
                            <tr>
                                <th>Rule No.</th>
                                <th>Crime Description</th>
                                <th>Confidence</th>
                            </tr>
                        </thead>
                        <tbody>
                            $report_content$
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</body>
$report_data$
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script>
    labels = document.getElementsByClassName('label-container')
    console.log(reportData)
    for (i = 0; i < labels.length; i++) {
        var label_name = labels[i].getElementsByClassName('rule-label')[0].getAttribute('value')
        switch (label_name) {
            case "accessibility service":
                labels[i].childNodes[0].nodeValue = "accesibility"
                break;
            case "dexClassLoader":
                labels[i].childNodes[0].nodeValue = "dexLoader"
                break;
            case "power manager":
                labels[i].childNodes[0].nodeValue = "power"
                break;
        }
    }
</script>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    Chart.defaults.font.size = 24;

    const radareChart = new Chart(ctx, {
        type: 'radar',
        backgroundColor: "rgba(0, 0, 0, 0.2)",
        data: {
            backgroundColor: "rgba(0, 0, 0, 0.2)",
            labels: [],
            datasets: [{
                label: 'Max confidence of rule labels',
                data: [],
                backgroundColor: 'rgba(0, 99, 132, 0.2)',
                borderColor: 'rgba(0, 0, 0, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                r: {
                    pointLabels: {
                        font: {
                            size: 24
                        },
                        borderWidth: 2,
                    },
                    max: 100,
                    min: 0,
                    ticks: {
                        stepSize: 20
                    },
                }
            }
        },
    });

    $(".rule-label").click(function () {
        var labels = []
        $("input:checkbox[name=label]:checked").each(function () {
            labels.push($(this).val());
        });

        maxConfidence = Array(labels.length)
        for (let i = 0; i < labels.length; i++) {
            const label = labels[i];
            for (let j = 0; j < reportData.length; j++) {
                const crime = reportData[j];
                if (crime.label.includes(label)) {

                    const reportConf = parseInt(crime.confidence.replace("%", ""))

                    if (maxConfidence[i] == undefined) {
                        maxConfidence[i] = reportConf
                    }
                    if (maxConfidence[i] < reportConf) {
                        maxConfidence[i] = reportConf

                    }
                }
            }
        }

        data = {
            backgroundColor: "rgba(0, 0, 0, 0.2)",
            labels: labels,
            datasets: [{
                label: 'Max confidence of rule labels',
                data: maxConfidence,
                backgroundColor: 'rgba(0, 99, 132, 0.2)',
                borderColor: 'rgba(0, 0, 0, 1)',
                borderWidth: 1
            }]
        }
        radareChart.data = data
        radareChart.update('active');

    })
</script>
<script>

    function deselect() {
        $("input:checkbox[name=label]:checked").each(function () {
            $(this).remove()
        });
        data = {
            backgroundColor: "rgba(0, 0, 0, 0.2)",
            labels: [],
            datasets: [{
                label: 'Max confidence of rule labels',
                data: [],
                backgroundColor: 'rgba(0, 99, 132, 0.2)',
                borderColor: 'rgba(0, 0, 0, 1)',
                borderWidth: 1
            }]
        }
        radareChart.data = data
        radareChart.update('active');

    }
    function search() {
        // Declare variables 
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("search");
        filter = input.value.toUpperCase();
        table = document.getElementById("report");
        tr = table.getElementsByTagName("tr");
        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
    function confidenceFilter(filter) {
        input = document.getElementById("search").value.toUpperCase();
        table = document.getElementById("report");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            description = tr[i].getElementsByTagName("td")[1];
            confidence = tr[i].getElementsByTagName("td")[2];
            if (description) {
                txtValueDescription = description.textContent || description.innerText;
                txtValueConfidence = confidence.textContent || confidence.innerText;
                if (txtValueDescription.toUpperCase().indexOf(input) > -1 && txtValueConfidence.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

</html>